import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";

import {
  RequestLogListProps,
  RequestSuccessLog,
  RequestSuccessLogParams
} from "@/pages/system/tool/requestLog/interfaces";
import TakeTimeLive from "@/pages/system/tool/requestLog/list/Stateless/components/TakeTimeLive";
import {Col, Row} from "antd";
import ProTable from "@ant-design/pro-table";
import DataStatistic from "@/pages/system/tool/requestLog/list/Stateless/components/DataStatistic";


const Stateless = (props: RequestLogListProps<RequestSuccessLogParams, RequestSuccessLog>) => {
  return (
    <PageContainer>
      <Row>
        <Col span={24}>
          <Row justify={"space-between"}>
            <Col style={{padding: "0 5px 5px 5px"}} span={6}>
              <DataStatistic {...props.dataStatistic}/>
            </Col>
            <Col style={{padding: "0 5px 5px 5px"}} span={9}>
              <TakeTimeLive {...props}/>
            </Col>
            <Col style={{padding: "0 5px 5px 5px"}} span={9}>
              <TakeTimeLive {...props}/>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row style={{marginTop: "3px"}}>
        <Col span={24}>
          <ProCard bodyStyle={{padding: "5px"}} tabs={{
            type: 'card',
          }}>
            <ProCard.TabPane key={"admin-success"} tab={"后台成功请求"}>
              <ProTable{...props.tableProps}/>
            </ProCard.TabPane>
            <ProCard.TabPane key={"admin-error"} tab={"后台失败请求"}>
              <ProTable {...props.tableProps}/>
            </ProCard.TabPane>
            <ProCard.TabPane key={"app-success"} tab={"app成功请求"}>
              <ProTable {...props.tableProps}/>
            </ProCard.TabPane>
            <ProCard.TabPane key={"app-error"} tab={"app失败请求"}>
              <ProTable {...props.tableProps}/>
            </ProCard.TabPane>
          </ProCard>
        </Col>
      </Row>
    </PageContainer>
  )
}

export default Stateless;
